<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/fot.css">
    <link rel="stylesheet" href="css/equipment.css">
</head>
<body>
<div class="warper">
    <div class="top" id="top">
        <span class="posi-re">中国联通
            <i class="posi-ab">4G</i>
            <i class="icon iconfont icon-xinhao"></i>
        </span>
        <time class="top-time">00:00</time>
        <span>100%<i class="icon iconfont">&#xe697;</i></span>
    </div>
    <div class="logo">
        <div class="logo-item">
            <img src="images/e1.jpg" alt="">
            <p>自由行</p>
        </div>
        <form action="" method="post">
            <input type="text" name="" placeholder="搜索">
        </form>
    </div>



<div class="recommendation">
    <h1 class="title">品牌推荐</h1>
    <div class="product">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="images/e3.jpg" alt="">
                        </div>
                        <p>多特</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="images/e4.jpg" alt="">
                        </div>
                        <p>狼爪</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="images/e5.jpg" alt="">
                        </div>
                        <p>极星</p>
                    </a>
                </li>
            </ul>
    </div>
</div>
<div class="introduction">
    <h1 class="title">品牌介绍</h1>
    <ul>
        <li>
            <div class="brand">
                <img src="images/e3.jpg" alt="">
                <p>多特</p>
            </div>
            <div class="introduce">
                <p>Deuter公司是欧洲最著名的背包生产及设计商。它创建于1898年，距今已有100多年的历史。
                    它是全球休闲运动用品行业中居于领先地位的大型跨国企业，业务范围遍及全球三十三个国家和地区。
                    Deuter公司拥有一批忠实的客户。他们的建议、批评和期许造就了今天的Deuter:
                    一个努力靠近用户并寻找最好的途径以达成目标的品牌。
                </p>
                <div class="website">
                    <a href="">进入官网</a>
                </div>

            </div>
        </li>
        <li>
            <div class="brand">
                <img src="images/e4.jpg" alt="">
                <p>狼爪</p>
            </div>
            <div class="introduce">
                <p>Jack Wolfskin每一件产品的基本原理就是完美结合最佳的功能性和最高的舒适度。
                    我们坚信，户外运动应该是充满乐趣的，产品应当帮助使用者获得舒适的户外体验。
                    整个产品线包括为户外运动、旅游和休闲专门设计的功能性服装，用具以及鞋品，分为"户外登山"，"旅行远足"，"都市户外"，"休闲野趣"等系列。
                </p>
                <div class="website">
                    <a href="">进入官网</a>
                </div>

            </div>

        </li>
        <li>
            <div class="brand">
                <img src="images/e5.jpg" alt="">
                <p>极星</p>
            </div>
            <div class="introduce">
                <p>
                    在极星之路上，我们开放、乐观并永远不满足于现状。
                    立足做好极星产品的同时，将多样化的国际知名户外专业品牌产品，
                    如美国著名户外品牌Marmot和意大利专业滑雪品牌Dialto的产品，介绍给国内的户外爱好者，
                    并与他们一同分享世界最新的技术成果和结晶!
                </p>
                <div class="website">
                    <a href="">进入官网</a>
                </div>

            </div>
        </li>
    </ul>
</div>




<div class="text">
    <div class="text1">
        <ul>
            <li class="active">
                户外服饰
            </li>
            <li>
                户外帐篷
            </li>
            <li>
                登山装备
            </li>
        </ul>
        <a href="">加入喜欢</a>
    </div>


    <div class="text2">
        <div class="outdoors-clothing active outdoors-clothing1">
            <div class="text">
                <div class="clothing">
                    <img src="images/e6.jpg" alt="">
                </div>
                <div class="outdoors">
                    <h2>户外出行 务本E10户外便携手电</h2>
                    <p>务本（WUBEN）的理念力于根本，务实根本之道。就是实在地做的东西，用最简单的方法做事，务本也逐渐成为全球户外照明领域的领先品牌。今天给大家带来的是务本E10户外便...</p>
                    <a href="">查看更多&gt;&gt;</a>
                </div>
            </div>
        </div>
    </div>

    <div class="text2">
        <div class="outdoors-clothing">
            <div class="text">
            <div class="clothing">
                <img src="images/e7.jpg" alt="">
            </div>
            <div class="outdoors">
                <h2>户外出行 务本E10户外便携手电</h2>
                <p>务本（WUBEN）的理念力于根本，务实根本之道。就是实在地做的东西，用最简单的方法做事，务本也逐渐成为全球户外照明领域的领先品牌。今天给大家带来的是务本E10户外便...</p>
                <a href="">查看更多&gt;&gt;</a>
            </div>
        </div>
        </div>
    </div>

    <div class="text2">
        <div class="outdoors-clothing">
            <div class="text">
            <div class="clothing">
                <img src="images/e8.jpg" alt="">
            </div>
            <div class="outdoors">
                <h2>户外出行 务本E10户外便携手电</h2>
                <p>务本（WUBEN）的理念力于根本，务实根本之道。就是实在地做的东西，用最简单的方法做事，务本也逐渐成为全球户外照明领域的领先品牌。今天给大家带来的是务本E10户外便...</p>
                <a href="">查看更多&gt;&gt;</a>
            </div>
            </div>
        </div>
    </div>
</div>
<div id="fot-nav">
        <nav>
            <ul class="list">
                <li>
                    <a href="index.html">
                        <i class="icon iconfont">&#xe61d;</i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="scenic.html">
                        <i class="icon iconfont">&#xe61e;</i>
                        <span>景区介绍</span>
                    </a>
                </li>
                <li>
                    <a href="pict.html">
                        <i class="icon iconfont">&#xe636;</i>
                        <span>相册</span>
                    </a>
                </li>
                <li>
                    <a href="travels.html">
                        <i class="icon iconfont">&#xe616;</i>
                        <span>游记</span>
                    </a>
                </li>
                <li class="active">
                    <a href="equipment.html">
                        <i class="icon iconfont">&#xe617;</i>
                        <span>旅游装备</span>
                    </a>
                </li>
                <li>
                    <a href="Personal.html">
                        <i class="icon iconfont">&#xe60b;</i>
                        <span>个人中心</span>
                    </a>
                </li>
            </ul>
            
            
            
            
            
            
        </nav>
    </div>
</div>







<script src="js/script.js"></script>
<script>
var text_1 = document.querySelectorAll('.text1 > ul >li');
var text_2 = document.querySelectorAll('.text2 > div');
for (var i=0;i<text_1.length;i++){
    text_1[i].index = i;
    text_1[i].addEventListener('click',function(){
        for (var j=0;j<text_1.length;j++){
            text_1[j].classList.remove('active');
            text_2[j].classList.remove('active');
        }
        console.log(this);
        console.log(this.index);
        this.classList.add('active');
        text_2[this.index].classList.add('active')
    })
}
</script>
</body>
</html>